<template>
	<view class="content">
		<view class="type-list">
			<view class="type-item" :class="item.value === form.type ? 'active' : ''" v-for="item in typeList"
				:key="item.value" @click="form.type = item.value">
				{{item.label}}
			</view>
		</view>
		<u--form labelPosition="left" :model="form" ref="uForm">
			<view class="form-area">
				<u-form-item label="金额" prop="money" borderBottom required>
					<u--input v-model="form.money" border="none" placeholder="请输入金额"></u--input>
					<view class="" slot="right"> 元 </view>
				</u-form-item>
				<u-form-item label="分类" prop="classify_id" borderBottom required @click="selectSzclassify">
					<u--input v-model="form.classify_name" disabled disabledColor="#ffffff" placeholder="请选择分类"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="账本" prop="ledger_id" borderBottom required @click="selectSzledger">
					<u--input v-model="form.ledger_name" disabled disabledColor="#ffffff" placeholder="请选择账本"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="账户" prop="account_id" borderBottom required @click="selectSzaccount('1')">
					<u--input v-model="form.account_name" disabled disabledColor="#ffffff" placeholder="请选择账户"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="转入" prop="account_id" v-if="form.type === '3' || form.type === '4'" borderBottom required @click="selectSzaccount('2')">
					<u--input v-model="form.in_user_name" disabled disabledColor="#ffffff" placeholder="请选择转入"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="日期" prop="in_date" required @click="selectInDate">
					<u--input v-model="form.in_date" disabled disabledColor="#ffffff" placeholder="请选择分类"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
			</view>
			
			<view class="form-area">
				<u-form-item label="备注" prop="remarks" borderBottom>
					<u--input v-model="form.remarks" border="none" placeholder="请输入备注"></u--input>
				</u-form-item>
				<u-form-item label=" " borderBottom labelWidth="0">
					<view class="" style="display: flex;justify-content: space-between;padding-top: 20rpx;padding-bottom: 30rpx;">
						<view class="">
							附件
						</view>
						<view class="">
							{{fileList.length}}/{{fileNumber}}
						</view>
					</view>
					<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" multiple :maxCount="fileNumber"
						width="144rpx" height="144rpx">
						<image src="../static/images/tp.png" mode="widthFix" style="width: 144rpx; height: 144rpx">
						</image>
					</u-upload>
				</u-form-item>
				<view class="" v-if="form.id" style="display: flex;flex-direction: column;gap: 20rpx;">
					<u-button text="保存" @click="submitUpdate" type="success"></u-button>
					<u-button text="审核" @click="handleAudit" type="success" style="margin-top: 20rpx;"></u-button>
					<u-button text="删除" @click="del" type="error" style="margin-top: 20rpx;"></u-button>
				</view>
				<u-button text="保存" @click="submit" type="success" v-else></u-button>
				
			</view>
		</u--form>
		
		<u-datetime-picker :show="show" v-model="date" mode="date"  @confirm="confirmDate" @cancel="show = false"></u-datetime-picker>
	</view>
</template>

<script>
	import {
		addSzinfo,saveSzinfo,getSzinfos,deleteSzinfo,upSzinfoStatus,
		getSzaccountInfo,getSzledgerInfo,getPidSzclassifyInfo
	} from '@/api/ledger.js'
	export default {
		data() {
			return {
				form: {
					type: '1',
					classify_id:'',
					ledger_id:'',
					account_id:'',
					in_date:'',
					images:'',
					house_id:'',
					money:'',
					remarks:'',
					in_user:''
				},
				typeList: [{
					value: '1',
					label: '支出'
				}, {
					value: '2',
					label: '收入'
				}, {
					value: '3',
					label: '转账'
				}, {
					value: '4',
					label: '借贷'
				}],
				fileList:[],
				fileNumber:4,
				show: false,
				date: Number(new Date()),
			}
		},
		onUnload() {
			uni.$off('szclassifySelected') // 清除事件监听
			uni.$off('szledgerSelected') // 清除事件监听
			uni.$off('szaccountSelected') // 清除事件监听
		},
		onShow() {
				
				
		},
		onLoad(query) {
			uni.$on('szclassifySelected', (szclassify) => {
				console.log('szclassifySelected：', szclassify)
				this.form.classify_id = szclassify.id
				this.form.classify_name = szclassify.name
			});
			uni.$on('szledgerSelected', (szcledger) => {
				console.log('szcledgerSelected：', szcledger)
				this.form.ledger_id = szcledger.id
				this.form.ledger_name = szcledger.name
			});
			uni.$on('szaccountSelected', (data) => {
				console.log('szaccountSelected：', data)
				if(data.type === '2') {
					this.form.in_user = data.data.id
					this.form.in_user_name = data.data.h_name
				}else {
					this.form.account_id = data.data.id
					this.form.account_name = data.data.h_name
				}
			});
			console.log('页面参数：', query)
			if(query.id) {
				this.getInfo(query.id)
			}
			if(query.house_id) {
				this.form.house_id = query.house_id
			}
		},
		methods:{
			getInfo(id){
				const timeFormat = uni.$u.timeFormat;
				getSzinfos({id}).then(res=>{
					let form = {...res.data.data,account_name:'',ledger_name:'',classify_name:'',in_user_name:''}
					form.type = res.data.data.type + ''
					getSzaccountInfo({id:res.data.data.account_id}).then(res=>{
						console.log(res.data.data)
						form.account_name = res.data.data?.h_name
						console.log('form1：', form)
					})
					getSzledgerInfo({id:res.data.data.ledger_id}).then(res=>{
						form.ledger_name = res.data.data?.name
						console.log('form2：', form)
					})
					getPidSzclassifyInfo({id:res.data.data.classify_id}).then(res=>{
						form.classify_name = res.data.data?.name
						console.log('form3：', form)
					})
					if(res.data.data.in_user) {
						getSzaccountInfo({id:res.data.data.in_user}).then(res=>{
							form.in_user_name = res.data.data?.h_name
							console.log('form4：', form)
						})
					}
					if(form.images) {
						this.fileList = form.images.split(',').map(url => ({
							url: url,
							// 其他可选属性
							status: 'success',
							message: '上传成功'
						}));
					}
					this.form = form
				})
			},
			selectSzclassify(){
				uni.navigateTo({
					url:'/pages-landlord/ledger/szclassify'
				})
			},
			selectSzledger(){
				uni.navigateTo({
					url:'/pages-landlord/ledger/szledger'
				})
			},
			selectSzaccount(type){
				console.log('选择账户：', type)
				uni.navigateTo({
					url:'/pages-landlord/ledger/szaccount?type='+type
				})
			},
			selectInDate(){
				this.show = true
				if(this.form.in_date) {
					this.date = new Date(this.form.in_date)
				}else {
					this.date = new Date()
				}
			},
			confirmDate(e){
				const timeFormat = uni.$u.timeFormat;
				let timeValue = timeFormat(e.value, 'yyyy-mm-dd');
				this.form.in_date = timeValue
				this.show = false
			},
			// 删除图片
			deletePic(event) {
				this.fileList.splice(event.index, 1);
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = event.file;
				let fileListLen = this.fileList.length;
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: "uploading",
						message: "上传中",
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.$uploadFilePromise(lists[i].url);
					let item = this.fileList[fileListLen];
					this.fileList.splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: "success",
							message: "",
							url: result.fullurl,
							img: result.url
						})
					);
					fileListLen++;
				}
			},
			submit(){
				if(!this.form.money) {
					uni.showToast({ title:'请输入金额',icon:'none' })
					return 
				}
				if(!this.form.classify_id) {
					uni.showToast({ title:'请选择分类',icon:'none' })
					return 
				}if(!this.form.ledger_id) {
					uni.showToast({ title:'请选择账本',icon:'none' })
					return 
				}if(!this.form.account_id) {
					uni.showToast({ title:'请选择账户',icon:'none' })
					return 
				}if(!this.form.in_date) {
					uni.showToast({ title:'请选择日期',icon:'none' })
					return 
				}
				let images = this.fileList.map(f=>f.url).join(',')
				addSzinfo({...this.form, images}).then(res=>{
					uni.showToast({
						title: '保存成功',
						icon: 'success',
						complete() {
							uni.navigateBack()
						}
					})
				})
			},
			submitUpdate(){
				if(!this.form.money) {
					uni.showToast({ title:'请输入金额',icon:'none' })
					return 
				}
				if(!this.form.classify_id) {
					uni.showToast({ title:'请选择分类',icon:'none' })
					return 
				}if(!this.form.ledger_id) {
					uni.showToast({ title:'请选择账本',icon:'none' })
					return 
				}if(!this.form.account_id) {
					uni.showToast({ title:'请选择账户',icon:'none' })
					return 
				}if(!this.form.in_date) {
					uni.showToast({ title:'请选择日期',icon:'none' })
					return 
				}
				let images = this.fileList.map(f=>f.url).join(',')
				saveSzinfo({...this.form, images}).then(res=>{
					uni.showToast({
						title: '修改成功',
						icon: 'success',
						complete() {
							uni.navigateBack()
						}
					})
				})
			},
			handleAudit(){
				let that = this
				uni.showModal({
					confirmColor: '#FE4F04',
					content: '确定审核账单吗？',
					success(res) {
						if (res.confirm) {
							upSzinfoStatus({
								ids: that.form.id
							}).then((res) => {
								uni.showToast({
									title: '审核成功',
									icon: 'success',
									complete() {
										uni.navigateBack()
									}
								})
							})
						}
					}
				})
			},
			del(){
				let that = this
				uni.showModal({
					confirmColor: '#FE4F04',
					content: '确定删除账单吗？',
					success(res) {
						if (res.confirm) {
							deleteSzinfo({
								ids: that.form.id
							}).then((res) => {
								uni.showToast({
									title: '删除成功',
									icon: 'success',
									complete() {
										uni.navigateBack()
									}
								})
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #eee;
	}

	.type-list {
		display: flex;
		justify-content: space-around;
		align-items: center;
		font-weight: 700;
		background-color: #fff;
		overflow: hidden;

		.type-item {
			padding: 20rpx;
			color: #9c9999;
			position: relative;
		}

		.type-item.active {
			color: #09bb07;
		}
		.type-item.active::after {
			content: '';
			width: 20rpx;
			height: 20rpx;
			position: absolute;
			bottom: -10rpx;
			left: 50%;
			background-color: #eeeeee;
			transform: translateX(-50%) rotate(45deg);
		}
	}

	.form-area {
		background-color: #fff;
		margin-top: 20rpx;
		padding: 0 20rpx;
	}
</style>